<template>
  <div class="container login-bg flex flex-center flex-mid">
    <div class="login-wrap">
      <div class="font-weight login-title">Login</div>
      <div class="form">
        <ZInput
          class="mb-20"
          v-model:thisValue="loginInfo.username"
          placeholder="请输入账号"
        />
        <ZInput
          class="mb-20"
          v-model:thisValue="loginInfo.password"
          placeholder="请输入密码"
          :password="true"
        />
        <el-button @click="userLogin" type="primary">登录</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="LoginPage">
import { reactive } from "vue";
import router from "../router";
import { Login } from "../apis/login/login";
const loginInfo = reactive({
  username: "",
  password: "",
});
const userLogin = async (): Promise<void> => {
  const data = await Login(loginInfo);
  if (data.token) {
    localStorage.setItem("token", data.token);
    router.push({ path: "/index" });
  }
};
</script>

<style scoped lang="scss">
.login-bg {
  background-image: url("../assets/background.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.login-wrap {
  width: 450px;
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #999;
  border-radius: 3px;
  .login-title {
    padding: 10px 0px;
    font-size: 36px;
  }
  .el-button {
    width: 100%;
  }
}
</style>
